import { Component, OnInit, Input, OnChanges, SimpleChanges } from '@angular/core';
import { HttpRequest } from "../../../service/httpRequest";

declare var $:any;


@Component({
  selector: 'chart-yfault',
  template: `<div id="yfault" style="height:400px;width: 100%; overflow: hidden; position: relative; z-index: 0;"></div>`
})
export class YFaultComponent implements OnInit, OnChanges{
  @Input() public date:any;
  option;

  datainit = [];
  private ti_cn:string = '设备预警次数';
  private suti_cn:string = '设备预警次数的统计：提供三种方式：日、月、年';
  private mt_cn:string = '预警次数 (次)';
  private tf_cn:string = "预警次数:";
  private sm_cn:string = '预警次数';
 

  constructor(private httpRequest:HttpRequest) { }

  ngOnInit() {
    this.paintYFault();
  }

  ngOnChanges(changes: SimpleChanges): void {
    if(changes.date.currentValue == undefined) return;
    if(changes.date.currentValue.year == 0){
      this.datainit = [
        ['2016',3000],
        ['2017',0],
        ['2018',0],
        ['2019',0],
        ['2020',0]
      ];
    }
    if(changes.date.currentValue.year != 0 && changes.date.currentValue.month ==0){
      this.datainit =[
        ['1',300],
        ['2',200],
        ['3',100],
        ['4',600],
        ['5',700],
        ['6',500],
        ['7',200],
        ['8',400],
        ['9',600],
        ['10',0],
        ['11',0],
        ['12',0]

      ];
    }

    if(changes.date.currentValue.month !=0 && changes.date.currentValue.day == 0){
      this.datainit =  [
        ['1',10],
        ['2',20],
        ['3',40],
        ['4',14],
        ['5',55],
        ['6',30],
        ['7',15],
        ['8',4],
        ['9',13],
        ['10',20],
        ['11',22],
        ['12',32],
        ['13',23],
        ['14',67],
        ['15',99],
        ['16',32],
        ['17',23],
        ['18',42],
        ['19',65],
        ['20',56],
        ['21',87],
        ['22',5],
        ['23',31],
        ['24',98],
        ['25',150],
        ['26',176],
        ['27',78],
        ['28',73],
        ['29',44],
        ['30',56],
        ['31',89]
      ];
    }

    if(changes.date.currentValue.day != 0){
      this.datainit =  [
        ['1',1],
        ['2',2],
        ['3',0],
        ['4',1],
        ['5',4],
        ['6',0],
        ['7',0],
        ['8',4],
        ['9',0],
        ['10',0],
        ['11',0],
        ['12',4],
        ['13',0],
        ['14',0],
        ['15',0],
        ['16',0],
        ['17',3],
        ['18',0],
        ['19',3],
        ['20',0],
        ['21',0],
        ['22',0],
        ['23',0],
        ['24',1]
      ];
    }
    this.getData();
  }

  getData(){
   
    this.yfault(this.ti_cn,this.suti_cn,this.mt_cn,this.tf_cn,this.sm_cn,this.datainit);
   
  }

  paintYFault(){
    let date = new Date();
    let ofday = date.getDate();
    let ofmonth = date.getMonth()+1;
    let ofyear = date.getFullYear();
    let time = ofyear + '-' + ofmonth  + '-' + ofday;

    this.datainit = [
      ['1',18],
      ['2',40],
      ['3',19],
      ['4',20],
      ['5',17],
      ['6',23],
      ['7',14],
      ['8',11],
      ['9',12],
      ['10',55],
      ['11',90],
      ['12',100],
      ['13',40],
      ['14',50],
      ['16',90],
      ['17',80],
      ['18',34],
      ['19',89],
      ['20',56],
      ['21',67],
      ['22',90],
      ['23',10],
      ['24',5]
    ];


    this.getData();

  }

  yfault(ti,suti,mt,tf,sm,data){
    $('#yfault').highcharts({
      chart: {
        type: 'column'
      },
      title: {
        text: ti
      },
      subtitle: {
        text: suti
      },
      xAxis: {
        type: 'category',
        labels: {
          rotation: -45,

          style: {
            fontSize: '13px',
            fontFamily: 'Verdana, sans-serif'
          }
        }
      },
      yAxis: {
        min: 0,
        title: {
          text: mt
        }
      },
      legend: {
        enabled: false
      },
      tooltip: {
        pointFormat: tf + '<b>{point.y} 次</b>'
      },
      series: [{
        color:'#7266ba',
        name: sm,
        data: data,
        dataLabels: {
          enabled: true,
          // rotation: -30,
          color: '#FFFFFF',
          align: 'right',
          format: '{point.y}', // one decimal
          y:5, // 10 pixels down from the top
          style: {
            fontSize: '13px',
            fontFamily: 'Verdana, sans-serif'
          }
        }
      }]
    });
  }
}
